<template>
    <div class="categories">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>
        <el-button type="success" plain @click="showAddDialog" style="margin-bottom:10px;"
        >添加分类</el-button>
        <tree-grid
            :treeStructure="true"
            :columns="columns"
            :data-source="dataSource"
            @deleteCate="deleteCategory"
            @editCate="editCategory">
        </tree-grid>

        <el-dialog title="添加分类" :visible.sync="addDialogVisible">
            <el-form :model="addform">
               <el-form-item label="分类名称">
                 <el-input v-model="addform.cat_name" auto-complete="off" style="width:80%"></el-input>
               </el-form-item>
               <el-form-item label="父级名称">
                  <el-cascader
                    :options="categoriesList"
                    v-model="selectedOptions"
                    :change-on-select='true'
                    :props= "categoriesprops"
                    >
                 </el-cascader>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addCateSubmit">确 定</el-button>
            </div>
        </el-dialog>

            <el-dialog title="编辑分类" :visible.sync="editDialogVisible">
            <el-form :model="editform">
               <el-form-item label="分类名称">
                 <el-input v-model="editform.cat_name" auto-complete="off" style="width:80%"></el-input>
               </el-form-item>
               <el-form-item label="父级名称">
                 <el-cascader
                    :options="editList"
                    v-model="selectedOptions1"
                    :change-on-select='false'
                    :props= "editprops"
                    >
                 </el-cascader>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="editCateSubmit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
// 引入自定义组件
import TreeGrid from '@/components/TreeGrid/TreeGrid.vue'
import {getCategoriesList, addCategory, getCategory, editCateLiat, deletecategory} from '@/api/index.js'
export default{
  data () {
    return {
      addform: {
        cat_name: '',
        cat_pid: '',
        cat_level: ''
      },
      editform: {
        cat_name: '',
        cat_pid: '',
        cat_level: ''
      },
      categoriesprops: {
        value: 'cat_id',
        label: 'cat_name',
        children: 'children'
      },
      selectedOptions: [],
      selectedOptions1: [],
      addDialogVisible: false,
      editDialogVisible: false,
      editprops: {
        value: 'cat_id',
        label: 'cat_name',
        children: 'children'
      },
      categoriesList: [],
      editList: [],
      dataSource: [],
      columns: [{
        text: '分类名称',
        dataIndex: 'cat_name',
        width: ''
      }, {
        text: '是否有效',
        dataIndex: 'cat_deleted',
        width: ''
      }, {
        text: '排序',
        dataIndex: 'cat_level',
        width: ''
      }]
    }
  },
  components: {TreeGrid},
  methods: {
    // 实现添加分类对话框
    showAddDialog () {
      this.addDialogVisible = true
      getCategoriesList({type: 2})
        .then(res => {
          // console.log(res)
          this.categoriesList = res.data
        })
    },
    // 实现添加分类操作
    addCateSubmit () {
      // console.log(this.selectedOptions)
      // console.log(this.addform)
      if (this.selectedOptions.length === 0) {
        this.addform.cat_pid = 0
        this.addform.cat_level = 0
      } else if (this.selectedOptions.length === 1) {
        this.addform.cat_pid = this.selectedOptions[0]
        this.addform.cat_level = 1
      } else if (this.selectedOptions.length === 2) {
        this.addform.cat_pid = this.selectedOptions[1]
        this.addform.cat_level = 2
      }
      addCategory(this.addform)
        .then(res => {
          if (res.meta.status === 201) {
            this.$message({
              type: 'success',
              message: res.meta.msg
            })
            this.addDialogVisible = false
            // console.log(123)
            this.initList()
          } else {
            this.$message({
              type: 'success',
              message: res.meta.msg
            })
          }
        })
    },
    // 实现编辑分类对话框
    editCategory (cid) {
      // console.log(cid)
      this.editDialogVisible = true
      getCategory(cid)
        .then(res => {
          if (res.meta.status === 200) {
            this.selectedOptions1 = []
            this.editform = res.data
            if (this.editform.cat_level === 1) {
              getCategoriesList({type: 1})
                .then(res1 => {
                  this.editList = res1.data
                  this.selectedOptions1.push(this.editform.cat_pid)
                })
            } else if (this.editform.cat_level === 2) {
              getCategoriesList({type: 2})
                .then(res1 => {
                  getCategory(this.editform.cat_pid).then(res2 => {
                    this.selectedOptions1.push(res2.data.cat_pid)
                    this.selectedOptions1.push(this.editform.cat_pid)
                  })
                  this.editList = res1.data
                })
            }
          }
        })
    },
    // 实现编辑提交操作
    editCateSubmit () {
      // console.log(this.selectedOptions1)
      // console.log(this.editform.cat_name)
      editCateLiat(this.editform.cat_id, this.editform.cat_name)
        .then(res => {
          // console.log(res)
          if (res.meta.status === 200) {
            this.$message({
              type: 'success',
              message: res.meta.msg
            })
            this.initList()
            this.editDialogVisible = false
            // console.log(123)
            this.initList()
          } else {
            this.$message({
              type: 'success',
              message: res.meta.msg
            })
          }
        })
    },
    // 实现删除操作
    deleteCategory (cid) {
      // console.log(cid)
      deletecategory(cid)
        .then(res => {
          if (res.meta.status === 200) {
            this.$message({
              type: 'success',
              message: res.meta.msg
            })
            this.initList()
          } else {
            this.$message({
              type: 'success',
              message: res.meta.msg
            })
          }
        })
    },
    initList () {
      // 获取商品数据列表
      getCategoriesList({type: 3})
        .then(res => {
          // console.log(res)
          if (res.meta.status === 200) {
            this.dataSource = res.data
          }
        })
    }
  },
  mounted () {
    this.initList()
  }
}
</script>
<style lang="scss" scoped>

</style>
